<script lang="ts" setup>
  import { ref } from 'vue';
  import { DownloadOutlined } from '@ant-design/icons-vue';
  import Space from '@sscd/space';
  import Button from '@sscd/button';
  import type { SizeType } from '@sscd/button';
  const size = ref<SizeType>('large');
</script>

<template>
  <div class="demo">
    <div class="demo-title">按钮尺寸</div>
    <div class="demo-content">
      <Space wrap>
        <Button type="primary" :size="size">Primary</Button>
        <Button :size="size">Normal</Button>
        <Button type="dashed" :size="size">Dashed</Button>
        <Button danger :size="size">Danger</Button>
        <Button type="link" :size="size">Link</Button>
        <br />
        <Button type="primary" :size="size">
          <template #icon>
            <DownloadOutlined />
          </template>
        </Button>
        <Button type="primary" shape="circle" :size="size">
          <template #icon>
            <DownloadOutlined />
          </template>
        </Button>
        <Button type="primary" shape="round" :size="size">
          <template #icon>
            <DownloadOutlined />
          </template>
          Download
        </Button>
        <Button type="primary" shape="round" :size="size">
          <template #icon>
            <DownloadOutlined />
          </template>
        </Button>
        <Button type="primary" :size="size">
          <template #icon>
            <DownloadOutlined />
          </template>
          Download
        </Button>
      </Space>
    </div>
  </div>
</template>